<template>
  <div class="layout">
    <Layout>
      <Layout>
        <Header :style="{padding: 0,margin: '20px',height: '130px',borderRadius: '10px'}" class="layout-header-bar">
          <Row>
            <Col span="2" align="left" style="margin-left: 20px">
              作业编号：
            </Col>
            <Col span="5" align="center">
              <Input v-model="work.id" style="width: 280px" />
            </Col>
            <Col span="8" align="center">
              司机姓名： <Input v-model="work.name" style="width: 280px" />
            </Col>
            <Col span="8" align="center">
              作业状态：
              <Select v-model="work.status" style="width: 280px;">
                <Option value="1" label="代提货"></Option>
                <Option value="2" label="在途"></Option>
                <Option value="3" label="已交付"></Option>
                <Option value="5" label="已作废"></Option>
              </Select>
            </Col>
          </Row>
          <Row>
            <Col span="2" style="margin-left: 20px;">
              运输任务编号：
            </Col>
            <Col span="5" align="center">
              <Input v-model="work.taskId" style="width: 280px" />
            </Col>
            <Col span="3" align="right">
              <Button @click="queryDriverInfo" type="error" style="width: 100px">搜索</Button>
            </Col>
            <Col span="3" align="center">
              <Button @click="clearContent" style="width: 100px">重置</Button>
            </Col>
          </Row>
        </Header>
        <Content :style="{margin: '20px', background: '#fff', minHeight: '520px', borderRadius: '10px',textAlign: 'center'}">
          <Table style="width:98%;margin: 20px auto;" :columns="columns" :data="page.list">
          </Table>
          <el-pagination
            style="margin-top: 40px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="work.currentPage"
            :page-sizes="[3 , 5 , 7]"
            :page-size="work.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      work:{
        currentPage: 1,
        pageSize: 3,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          type: 'index',
          width: '80'
        },
        {
          title: '作业编号',
          key: 'id',
          width: '140'
        },
        {
          title: '司机姓名',
          key: 'name',
          width: '140'
        },
        {
          title: '所属转运中心',
          key: 'cname',
          width: '150'
        },
        {
          title: '车牌号码',
          key: 'licensePlate',
          width: '130'
        },
        {
          title: '计划发车时间',
          key: 'planDepartureTime',
          width: '170'
        },
        {
          title: '实际到达时间',
          key: 'actualArrivalTime',
          width: '170'
        },
        {
          title: '运输任务编号',
          key: 'taskTransportId',
          width: '140'
        },
        {
          title: '作业状态',
          key: 'status',
          width: '110',
        },
      ],
      page:{}
    }
  },
  created(){
    this.queryDriverInfo();
  },
  methods:{
    // 查询司机作业单信息
    queryDriverInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-driver-job/queryDriverInfo",this.work);
      rsp.data.list.forEach(e => {
        if (e.status==1){
          e.status = '待提货';
        }else if(e.status==2){
          e.status = '在途';
        }else if (e.status==3 || e.status ==4){
          e.status = '已交付';
        }else{
          e.status = '已作废';
        }
      })
      // console.log(rsp.data);
      this.page = rsp.data;
    },
    // 清空条件
    clearContent(){
      this.work = {
        currentPage: 1,
        pageSize: 3
      };
      // 清空条件重新执行查询
      this.queryDriverInfo();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.work.pageSize = val;
      this.queryDriverInfo();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.work.currentPage = val;
      this.queryDriverInfo();
    },
  }
}

</script>

<style scoped>

.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
</style>
